<template>
	<view class="doc-list">
		<view class="item" v-for="item,index in docList" >
			<view class="info">
				<image :src="base+item.avatar" mode="" @tap="toInquiry(item.name)"></image>
				<view class="dicinfo">
					<view class="name">{{item.name}}</view>
					<view class="m">职称:{{item.jobName}}</view>
					<view class="m">职业编号:{{item.practiceNo}}</view>
					<view class="m">从业年限:{{item.workingYears}}年</view>
				</view>
			</view>
			<view class="goodat">
				<text>医生擅长</text>
				<image src="/static/images/right.png" mode="" @tap="show(item)"></image>
			</view>
			<view class="goodat-msg" v-if="item.show">
				{{item.goodAt}}
			</view>
		</view>
         <view class="more" v-if="!hasMore">我是有底线的...</view>
	</view>
</template>

<script setup>
	import {

		ref
	} from 'vue'
	import {
		onLoad,onReachBottom
	} from "@dcloudio/uni-app"
     // 宠物类别id
	let id = 0;
	onLoad((params) => {
		id = params.id;
		pageData.typeId = id;
		getDoctor(id)
	})
	const base = uni.$base_url

	const docList = ref([])
	// 请求的分页和类别数据参数
	const hasMore = ref(true)
	let pageData = {
		pageSize: 5,
		pageNum: 1,
		typeId: 0
	}
	// 每个医生是否显示擅长信息
	const showDetail=ref(false)
	async function getDoctor() {
		let res = await uni.$get("/prod-api/api/pet-hospital/pet-doctor/list", pageData)
		hasMore.value = res.total >= pageData.pageNum * pageData.pageSize
		res.rows=res.rows.map(item=>{
			item.show=false
			return item
		})
		docList.value =[...docList.value, ...res.rows]
		console.log(res)
	}
	function show(item)
	{
		item.show=!item.show
		
	}
	// 触底加载
	onReachBottom(()=>{
		pageData.pageNum++
		getDoctor()
	})
	// 点击医生,进入问诊页面
	function toInquiry(name)
	{
		uni.navigateTo({
			url:"/pages/pet/pet-inquiry?name="+name
		})
	}
</script>

<style lang="scss">
	.doc-list {
		margin-bottom: 10px;
		.item {
			margin: 10px;
			border:1px solid #ccc;
			padding: 5px;

			.info {
				display: flex;
				justify-content: space-around;

				image {
					width: 200rpx;
					height: 300rpx;
					margin-right: 5px;
				}

				.dicinfo {
					width: 500rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;

					}

					.m {
						font-size: 24rpx;
						color: #999;
						line-height: 50rpx;
					}
				}
			}

			.goodat {
				margin-top: 5px;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 15px;
					height: 10px;
					cursor: pointer;
				}

			}

			.goodat-msg {
				font-size: 26rpx;
				color: #999;
			}
		}
		.more{
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>